<template>
  <a-modal
    :open="open"
    @update:open="(val) => emit('update:open', val)"
    :title="title"
    @ok="handleOk"
    @cancel="handleCancel"
    :footer="null"
    destroyOnClose
  >
    <a-form :model="form" :rules="rules" ref="formRef" layout="vertical">
      <a-form-item label="真实姓名：" name="realName" :rules="rules.realName" required>
        <a-input v-model:value="form.realName" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="登录密码：" name="password" :rules="rules.password" required>
        <a-input-password
          v-model:value="form.password"
          placeholder="请输入密码，包含大小写字母、数字、特殊符合，长度大于等于8位"
          :visibility-toggle="true"
        />
      </a-form-item>
      <a-form-item
        label="确认密码："
        name="confirmPassword"
        :rules="rules.confirmPassword"
        required
      >
        <a-input-password
          v-model:value="form.confirmPassword"
          placeholder="请再次输入密码"
          :visibility-toggle="true"
        />
      </a-form-item>
      <a-form-item label="所属组织：" name="organization" :rules="rules.organization" required>
        <a-select v-model:value="form.organization" placeholder="请选择">
          <a-select-option v-for="item in organizations" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所属单位：" name="company">
        <a-input v-model:value="form.company" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="所属部门：" name="department">
        <a-input v-model:value="form.department" placeholder="请输入" />
      </a-form-item>
      <div style="text-align: center; margin-top: 24px">
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button style="margin-left: 16px" @click="handleCancel">取消</a-button>
      </div>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'

const props = defineProps({
  open: Boolean,
  title: String,
  rowData: Object,
})
const emit = defineEmits(['update:open', 'success'])

const formRef = ref()
const form = ref({
  realName: '',
  password: '',
  confirmPassword: '',
  organization: '',
  department: '',
  company: '',
})

const organizations = [
  { label: '组织A', value: 'orgA' },
  { label: '组织B', value: 'orgB' },
]

const rules = {
  realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, message: '密码长度不能少于8位', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,}$/,
      message: '密码需包含大小写字母、数字、特殊符号',
      trigger: 'blur',
    },
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (_rule: any, value: string) => {
        if (value !== form.value.password) {
          return Promise.reject('两次输入的密码不一致')
        }
        return Promise.resolve()
      },
      trigger: 'blur',
    },
  ],
  organization: [{ required: true, message: '请选择所属组织', trigger: 'change' }],
}

watch(
  () => props.open,
  (val) => {
    if (val && props.rowData) {
      Object.assign(form.value, props.rowData)
    } else if (!val) {
      form.value.realName = ''
      form.value.password = ''
      form.value.confirmPassword = ''
      form.value.organization = ''
      form.value.department = ''
      form.value.company = ''
    }
  },
)

const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      emit('success', { ...form.value })
      emit('update:open', false)
      message.success('提交成功')
    })
    .catch(() => {})
}
const handleCancel = () => {
  emit('update:open', false)
}
</script>

<style scoped>
:deep(.ant-form-item-required) {
  color: #f5222d;
}
</style>
